<template>
  <div>
    <div style="position: relative;z-index: 666" @click.stop="c" @drop="dragUp">
      <slot>
        选择文件
      </slot>
    </div>
    <input :webkitdirectory="folder" @change="f" :accept="attrs" type="file"
           style="display: none" :multiple="multiple"/>
  </div>

</template>

<script>
  import message from "./message";

  export default {
    name: "uploader-btn",
    props: {
      attrs: {
        type: Array,
        default() {
          return ['*'];
        }
      },
      folder: {
        type: Boolean,
        default() {
          return false;
        }
      },
      multiple: {
        type: Boolean,
        default() {
          return false;
        }
      },
    },
    data() {
      return {}
    },
    mounted() {
      if (this.folder) {
        message.methods.addMsg('某些浏览器可能不支持上传文件夹...');
      }
    },
    methods: {
      dragUp(e) {
        e.stopPropagation();
        //阻止浏览器默认打开文件的操作
        e.preventDefault();
        const file = e.dataTransfer.files[0];
        file.speed = 0;
        file.state = '';
        this.$parent.addTask(file);
      },
      c(event) {
        event.target.nextElementSibling.click();
      },
      f(event) {
        const target = event.target;
        for (let i = 0; i < target.files.length; i++) {
          target.files[i].speed = 0;
          target.files[i].state = '';
          this.$parent.addTask(target.files[i]);
        }
      },
    }
  }
</script>

<style scoped>

</style>
